<template>
	<!-- 瀑布流组件 -->
	<view class="u-flow">
		<view class="flowPanel">
			<view class="leftPanel">
				<view class="itemContainer" v-for="(item,index) in list" :key="item.car_id" v-if="index%2==0" @tap="toDetails(item.car_id)">
					<image class="img" :src="require('../../../static/images/home/car.jpg')" mode="aspectFill" />
					<view class="title">{{item.name}} · {{item.content}}</view>
					<view class="label_box">
						<view class="label_item">{{item.list_time}}</view>
						<view class="label_item">{{item.energy}}</view>
					</view>
					<view class="house_detail">
						<text class="house_detail_area">{{item.cylinder}}座</text>
						<text class="recommend">推荐</text>
						<text class="pledge">{{item.drive}}</text>
					</view>
					<view class="house_address">{{item.car_model}}</view>
					<view class="rent_box">
						<text class="rent_monney">{{item.price}}</text>
						<text class="rent_name">万元</text>
					</view>
				</view>
			</view>
			<view class="rightPanel">
				<view class="itemContainer" v-for="(item,index) in list" :key="item.car_id" v-if="index%2==1" @tap="toDetails(item.car_id)">
					<image class="img" :src="require('../../../static/images/home/car.jpg')" mode="aspectFill" />
					<view class="title">{{item.name}} · {{item.content}}</view>
					<view class="label_box">
						<view class="label_item">{{item.list_time}}</view>
						<view class="label_item">{{item.energy}}</view>
					</view>
					<view class="house_detail">
						<text class="house_detail_area">{{item.cylinder}}座</text>
						<text class="recommend">推荐</text>
						<text class="pledge">{{item.drive}}</text>
					</view>
					<view class="house_address">{{item.car_model}}</view>
					<view class="rent_box">
						<text class="rent_monney">{{item.price}}</text>
						<text class="rent_name">万元</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			list:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data() {
			return {
			}
		},
		onLoad() {

		},
		methods: {
      //点击进入详情页
      toDetails(car_id){
        uni.navigateTo({
          url:'/pages/carDetails/carDetails?car_id='+car_id,
          fail(e) {
            console.log(e);
          }
        })
      },
      
		}
	}
</script>

<style scoped lang="scss">
	page {
		height: 100%;
	}

	.u-flow {
		padding-top: 20upx;
		width: 100%;
		padding-bottom: 100rpx;
		
		background: #F5F7FA;
		// @extend %box;
		// background-color: #ffffff;
		/* padding: 0 15px; */
	}

	.flowPanel {
		display: flex;
		flex-direction: row;
		justify-content:space-around;
		width: 100%;
		overflow: hidden;

		.leftPanel {
			width: 47%;
			overflow: hidden;
		}

		.itemContainer {
			// margin-top: 30upx;
			margin-bottom: 30upx;
			border-radius: 20upx;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;

			.img {
				width: 100%;
				height: 300upx;
			}
			.title{
				font-size: 26upx;
				font-weight: 500;
				color: #000000;
				width: 90%;
				margin:16upx auto 8upx;
			}
			.label_box {
				width: 90%;
				margin: auto;
				display: flex;
				flex-wrap: wrap;
				.label_item {
					font-size: 18upx;
					color: #617195;
					background: #eff3f6;
					border-radius: 4upx;
					padding: 6upx;
					margin: 5upx 10upx 10upx 0;
				}

			}
			.house_detail{
				width: 90%;
				margin: auto;
					font-size: 20upx;
					font-weight: 500;
					color: #333333;
					.house_detail_area{
						padding-right: 14upx;
						border-right-style:groove;
					}
					.recommend{
						margin-left: 14upx;
						padding-right: 14upx;
						border-right-style:groove;
					}
					.pledge{
						padding-left: 10upx;
					}
				
			}
			.house_address{
				width: 90%;
				margin: auto;
				font-size: 20upx;
				font-weight: 500;
				color: #333333;
				letter-spacing: 0.5px;
				margin-top: 6upx;
			}
			.rent_box{
				width: 90%;
				margin:14upx auto;
				.rent_monney{
					font-size: 36upx;
					font-weight: 800;
					color: #ed5c47;
					margin-right: 10upx;
				}
				.rent_name{
					font-size: 20upx;
					font-weight: 500;
					color: #ed5c47;
					letter-spacing: 0.5px;
				}
			}
			
		}

		.rightPanel {
			width: 48%;
			overflow: hidden;
		}
	}



	.flowPanel image {
		width: 100%;
		border-top-right-radius: 10rpx;
		border-top-left-radius: 10rpx;
	}

	// .flowPanel .itemContainer .title {
	// 	overflow: hidden;
	// 	display: -webkit-box;
	// 	-webkit-box-orient: vertical;
	// 	-webkit-line-clamp: 2;
	// 	word-wrap: break-word;
	// 	word-break: break-all;
	// 	color: #333;
	// 	text-align: left;
	// 	padding: 0.2em 0.5em;
	// }

	.flowPanel .itemContainer .info {
		color: #8a8a8a;
		overflow: hidden;
		padding: 10px;
		/* border: 1px #e9e9e9 solid; */
		flex-direction: row;
		justify-content: space-between;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}

	.flowPanel .itemContainer .info .left {
		flex-direction: row;
	}

	.flowPanel .itemContainer .info .left .date {
		flex-direction: row;
		font-size: 11px;
		line-height: 11px;
	}

	.flowPanel .itemContainer .info .left .date:before {
		font-family: myfont;
		content: "\e63a";
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: .2px;
		padding-right: 2px;
	}

	.flowPanel .itemContainer .info .left .commentNum {
		padding-left: 5px;
		flex-direction: row;
		font-size: 11px;
		line-height: 11px;
	}

	.flowPanel .itemContainer .info .left .commentNum:before {
		font-family: myfont;
		content: "\e635";
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: .2px;
		padding-right: 2px;
	}

	.flowPanel .itemContainer .info .right {
		flex-direction: row;
	}

	.flowPanel .itemContainer .info .right .clickNum {
		flex-direction: row;
		font-size: 11px;
		line-height: 11px;
	}

	.flowPanel .itemContainer .info .right .clickNum:before {
		font-family: myfont;
		content: "\e633";
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: .2px;
		padding-right: 2px;
	}
</style>
